<template>
	<view>
		<nav-bar color="#000000" bbtn bgc="#f4f4fa">下单</nav-bar>
		<!-- 地址信息 -->
		<view class="address" v-if="goodsInfo.type == 2 && address" @click="chooseAddress">
			<view class="img"><image src="../../static/image/order/icon_dzz@3x.png" mode=""></image></view>
			<view class="message">
				<view class="name">{{ address.name }}</view>
				<view class="mobile">{{ address.mobile }}</view>
			</view>
			<view class="icon"><image src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode=""></image></view>
		</view>
		<!-- 新增地址 -->
		<view class="newAddress" v-if="goodsInfo.type == 2 && address.length == 0" @click="addAddress">
			<view class="img"><image src="../../static/image/address/icon_gxzz@3x.png"></image></view>
			<view class="message"><view class="text">设置收货地址</view></view>
			<view class="icon"><image src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode=""></image></view>
		</view>
		<!-- 商品详情组件 -->
		<view id='componentsChange'>
			<shopList :param="goodsInfo" :listStyle="listStyle"></shopList>
		</view>
		<!-- 购买数量 -->
		<view class="section-2">
			<view class="text">购买数量</view>
			<view class="payNum">
				<view class="subBtn" @click="subNumber()">-</view>
				<view class="num">{{ count }}</view>
				<view class="addBtn" @click="addNumber()">+</view>
			</view>
		</view>
		<!-- 物流商品运费信息 -->
		<view class="money" v-if="this.goodsInfo.type == 2">
			<view class="shopMoney">
				<text class="text1">商品单价</text>
				<text class="text2">￥{{ goodsInfo.price }}元</text>
			</view>
			<view class="freightMoney">
				<text class="text1">运费</text>
				<text class="text2">￥{{ goodsInfo.post_fee }}元</text>
			</view>
		</view>
		<!-- 券码商品个人信息 -->
		<view class="userInfo" v-if="goodsInfo.type == 1">
			<view class="title">预定联系人</view>
			<view class="name">
				<view class="text">姓名</view>
				<view class="input"><input type="text" value="" placeholder="请填写姓名" v-model="inputName"/></view>
			</view>
			<view class="mobile">
				<view class="text">手机</view>
				<view class="input"><input type="text" value="" placeholder="请填写电话" maxlength="11" v-model="inputMobole"/></view>
			</view>
		</view>

		<view class="payWay">
			<view class="text">支付方式</view>
			<view class="way">微信支付</view>
		</view>
		<!-- 支付 -->
		<view class="pay">
			<view class="text">合计</view>
			<view class="totalMoney">￥{{ goodsInfo.price * count + Number(goodsInfo.post_fee) }}</view>
			<view class="submitBtn" @click="submitOrder()">提交订单</view>
		</view>
	</view>
</template>

<script>
import shopList from '../../components/shopLst.vue';
export default {
	components: {
		shopList
	},
	data() {
		return {
			count: 1, //数量加减
			goodsInfo: '', //个人商品信息,
			address: '', //地址信息
			listStyle: 3,
			orderId: '' ,//订单ID,
			inputName:'',//填写的姓名
			inputMobole:''//填写的电话
		};
	},
	onLoad(option) {
		this.request(option.goods_id, option.specs_id);
	},
	onShow() {
		if (uni.getStorageSync('orderAddress')) {
			this.address = uni.getStorageSync('orderAddress');
		}
	},
	methods: {
		// 提交订单
		submitOrder: function() {
			this.ajaxJson('selStock', { goods_id: this.goodsInfo.id }, res => {
				if (!this.inputName) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (!/^1[3456789]\d{9}$/.test(this.inputMobole)) {
					uni.showToast({
						title: '手机号码有误，请重填',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if(!this.address){
					uni.showToast({
						title: '请选择地址',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (res <= 0) {
					uni.showToast({
						title: '抱歉，该商品已售罄'
					});
					uni.reLaunch({
						url: '/pages/search/search.vue'
					});
				} else {
					let dataPost={};
					//物流提交
					if(this.goodsInfo.type==2){
						dataPost = {
							first_cate: '',
							second_cate: '',
							goods_id: this.goodsInfo.id,
							specs_id: this.goodsInfo.specs_id,
							mater_id: '',
							name: this.address.name,
							mobile: this.address.mobile,
							num: this.count,
							amount: this.goodsInfo.price * this.count + Number(this.goodsInfo.post_fee),
							price: this.goodsInfo.price,
							address_id: this.address.address_id
						};	
					}else{
						dataPost = {
							first_cate: '',
							second_cate: '',
							goods_id: this.goodsInfo.id,
							specs_id: this.goodsInfo.specs_id,
							mater_id: '',
							name:this.inputName ,
							mobile:this.inputMobole ,
							num: this.count,
							amount: this.goodsInfo.price * this.count,
							price: this.goodsInfo.price
						};
					}
					this.ajaxJson('payOrder', dataPost, res => {
						this.orderId = res;
						uni.navigateTo({
							url: 'payment?id=' + this.orderId + '&amount=' + dataPost.amount+'&type='+this.goodsInfo.type
						});
					});
				}
			});
		},
		//商品减
		subNumber: function() {
			if (this.count > 0) {
				this.count--;
			}
		},
		//商品加
		addNumber: function() {
			this.count++;
		},
		//请求接口
		request: function(goods_id, specs_id) {
			this.ajaxJson('placeOrder', { goods_id, specs_id }, res => {
				this.goodsInfo = res.goodsInfo;
				this.address = res.address;
				if (uni.getStorageSync('orderAddress')) {
					this.address = uni.getStorageSync('orderAddress');
				}
			});
		},
		//新增收货地址
		addAddress: function() {
			uni.navigateTo({
				url: '../address/newAddress?jumpType=1'
			});
		},
		//选择收货地址
		chooseAddress: function() {
			uni.navigateTo({
				url: '../address/address?jumpType=1'
			});
		}
	}
};
</script>

<style lang="scss">
* {
	padding: 0;
	margin: 0;
	font-size: 0.75rem;
	box-sizing: border-box;
}
#componentsChange{
	margin-top: 140rpx;
}
page {
	background: #f4f4fa;
}
.address {
	width: 92%;
	margin: 120rpx auto 0;
	padding: 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 40rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.message {
		width: 80%;
		display: flex;
		flex-direction: column;
		.mobile {
			color: #aaaaaa;
		}
	}
	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.section-2 {
	width: 92%;
	margin: 40rpx auto 0;
	padding: 40rpx 20rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx;
	.text {
		font-weight: bold;
		font-size: 32rpx;
	}
	.payNum {
		width: 180rpx;
		display: flex;
		justify-content: space-around;
		border: 1px solid #dadae3;
		border-radius: 10rpx;
		.subBtn,
		.num,
		.addBtn {
			width: 100%;
			text-align: center;
			padding: 10rpx;
		}
		.subBtn,
		.addBtn {
			color: #aaaaaa;
		}
		.subBtn {
			border-right: 1px solid #dadae3;
		}
		.addBtn {
			border-left: 1px solid #dadae3;
		}
	}
}
.money {
	width: 92%;
	margin: 40rpx auto 0;
	padding: 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	.shopMoney,
	.freightMoney {
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		.text1 {
			font-weight: bold;
			font-size: 32rpx;
		}
		.text2 {
			font-size: 32rpx;
		}
	}
	.freightMoney {
		margin-top: 30rpx;
	}
}
.payWay {
	width: 92%;
	margin: 40rpx auto 0;
	padding: 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	.text {
		font-size: 32rpx;
		font-weight: bold;
	}
	.way {
		color: #999999;
	}
}

.pay {
	width: 100%;
	display: flex;
	line-height: 100rpx;
	padding-left: 40rpx;
	height: 100rpx;
	justify-content: flex-start;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	// border: 1px red solid;
	background-color: #ffffff;
	.submitBtn {
		width: 40%;
		margin-left: auto;
		text-align: center;
		background: linear-gradient(to top, #fd6431, #ff9972);
		color: #ffffff;
		font-size: 34rpx;
	}
	.totalMoney {
		color: #fd6431;
		font-size: 34rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}
}
//新增地址
.newAddress {
	width: 92%;
	margin: 120rpx auto 0;
	padding: 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 40rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.message {
		width: 80%;
		display: flex;
		flex-direction: column;
		.mobile {
			color: #aaaaaa;
		}
	}
	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.userInfo {
	width: 92%;
	margin: 40rpx auto 0;
	padding: 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	.title {
		font-size: 32rpx;
		font-weight: bold;
	}
	.name,
	.mobile {
		display: flex;
		margin-top: 30rpx;
		font-size: 32rpx;
		.text {
			margin-right: 40rpx;
		}
	}
}
</style>
